<template>
  <el-dialog title="查看" :close-on-click-modal="false" :visible.sync="visible" width="70%">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="150px">

      <div>
        <template v-if="dataForm.area_feature == 0">
          <el-form-item label="商品平台分类">

            <!-- <span>此商品对应的类目，分类由平台管理</span> -->
            <el-tag v-for="tagIndex in productClassifyMultipleSelection" :key="tagIndex.name" :type="tagIndex.type">
              {{ tagIndex.name }}
            </el-tag>
          </el-form-item>
          <el-form-item label="商品店铺分组">
            <el-tag style="margin-right:10px" v-for="tagIndex in dataForm.group_list" :key="tagIndex.name">
              {{ tagIndex.name }}
            </el-tag>
          </el-form-item>
        </template>

        <!-- <el-form-item label="商品短标题">
          <el-input maxlength="10" disabled show-word-limit v-model="dataForm.short_title" placeholder="必填,商品短标题"></el-input>
        </el-form-item> -->
        <el-form-item label="商品名称">
          <el-input v-model="dataForm.title" disabled placeholder="必填,商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商家编码">
          <el-input v-model="dataForm.spu_code" disabled placeholder="选填,与商家自由系统对接时需要"></el-input>
        </el-form-item>

        <el-form-item label="商品图片">
          <!-- <Imglist  :limit="1" :value="dataForm.cover" :dialogVisible="visible"></Imglist> -->
          <img class="paImg" v-for="(item) in dataForm.images" :src="item" />
        </el-form-item>
        <el-form-item label="商品视频">
          <video :src="dataForm.video_url" controls="controls" style="width: 148px;height: 148px;"></video>
        </el-form-item>
        <el-form-item label="">
          <el-table :data="dataForm.goods_sku_list" border style="width: 100%">
            <el-table-column prop="sku_set_name" align=center label="规格">

            </el-table-column>
            <el-table-column prop="single_goods_title" label="单品" align=center width="180">
            </el-table-column>
            <el-table-column prop="cover" label="图片" align=center width="180">
              <template slot-scope="scope">
                <div class="imgList" v-if="scope.row.cover && scope.row.cover != ''">
                  <i class="el-icon-remove-outline"></i>
                  <img :src="scope.row.cover" style="width:80px;height:80px;" alt />
                </div>

              </template>
            </el-table-column>
            <el-table-column prop="bar_code" label="商品编码" align=center width="120">
              <!-- <template slot-scope="scope">
                <el-input v-model="scope.row.bar_code" maxlength="30"></el-input>
              </template> -->
            </el-table-column>
            <el-table-column prop="exchange_point" label="所需积分" align=center width="120" v-if="dataForm.point_goods">
              <!-- <template slot-scope="scope">
                <el-input v-model="scope.row.exchange_point"></el-input>
              </template> -->
            </el-table-column>
            <template v-if="dataForm.third">
              <el-table-column prop="agreement_price" label="协议价" align=center width="100">
              </el-table-column>
              <el-table-column prop="guide_price" label="指导价" align=center width="100">
              </el-table-column>
              <el-table-column prop="third_cost_price" label="成本价" align=center width="100">
              </el-table-column>
            </template>
            <el-table-column prop="market_price" label="市场价格" align=center width="100">
              <!-- <template slot-scope="scope">
                <el-input-number v-model="scope.row.market_price" :min="0" style="width:160px"></el-input-number>
              </template> -->
            </el-table-column>
            <el-table-column prop="sale_price" label="销售价格" align=center width="100">
              <!-- <template slot-scope="scope">
                <el-input-number v-model="scope.row.sale_price" :min="0" style="width:160px"></el-input-number>
              </template> -->
            </el-table-column>
            <el-table-column prop="weight" label="重量(KG)" align=center width="80">
              <!-- <template slot-scope="scope">
                <el-input-number v-model="scope.row.weight" :min="0" style="width:160px"></el-input-number>
              </template> -->
            </el-table-column>
            <el-table-column prop="volume" label="体积(M3)" align=center width="80">
              <!-- <template slot-scope="scope">
                <el-input-number v-model="scope.row.volume" :min="0" style="width:160px"> </el-input-number>
              </template> -->
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="配送模板">
          <div class="c-error"> {{ dataForm.freight_template_id != '' ? '有配送模板' : '无配送模板' }}</div>
        </el-form-item>

      </div>

      <!--拓展信息-->
      <div>
        <el-form-item label="赠送贡献值">
          <el-input-number v-model="dataForm.consumption_value" disabled :min="0" placeholder="赠送贡献值"></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="激活商品" v-if="dataForm.area_feature == 1">
          <el-select disabled v-model="dataForm.service_package_area" placeholder="请选择">
            <el-option v-for="item in service_package_areaArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="初始销量">
          <el-input-number v-model="dataForm.init_sale_num" disabled :min="0" placeholder="初始销量"></el-input-number>
        </el-form-item>
        <el-form-item label="商品限购">
          <el-input-number v-model="dataForm.limit_buy_num" disabled :min="0" placeholder="0表示不限购"></el-input-number>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="dataForm.sort" :min="0" disabled placeholder="数字越大越靠前"></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="是否开启会员折扣">
          <el-radio-group v-model="dataForm.open_user_discount">
            <el-radio disabled :label="false">关</el-radio>
            <el-radio disabled :label="true">开</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <template v-if="dataForm.area_feature == 0">
          <el-form-item label="是否热销">
            <el-radio-group v-model="dataForm.hot">
              <el-radio disabled :label="false">否</el-radio>
              <el-radio disabled :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否是新品">
            <el-radio-group v-model="dataForm.new_goods">
              <el-radio disabled :label="false">否</el-radio>
              <el-radio disabled :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否推荐">
            <el-radio-group v-model="dataForm.recommend">
              <el-radio disabled :label="false">否</el-radio>
              <el-radio disabled :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item label="商品详情">
          <editor :value="dataForm.mobile_detail"></editor>
        </el-form-item>

      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'
import serviceApione from '@/api/serviceApione.js'
import Imglist from './../../oss/oss-uploadImg'
import videoList from './../../oss/oss-uploadvideo'
import editor from '@/components/editor'
export default {
  components: {
    Imglist,
    editor,
    videoList
  },
  data () {
    return {
      visible: false,
      dialogVisible: false,
      dataForm: {
        cover: []
      },
      sendModel: [],
      productClassifyTableData: [],
      productClassifyMultipleSelection: [],
      service_package_areaArr: [
        { label: "普通会员", value: 0 },
        { label: "创客", value: 1 },
        { label: "爱心小屋", value: 2 },
        { label: "服务驿站", value: 3 },
        { label: "服务中心", value: 4 },
        { label: "市级", value: 5 },
        { label: "省级公司", value: 6 },
        { label: "大区公司", value: 7 },
      ],
    }
  },

  methods: {
    init (id) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      this.dataForm.cover = []
      serviceApione.goodsInfo(id).then(res => {
        if (res.data.code == 200) {
          res.data.data.cover = res.data.data.cover.split(',')
          this.dataForm = res.data.data
          this.getCategoryList(res.data.data.category_id)
        }
      })
      // 运费模板数据
      // serviceApione.freighttemplate().then(res=>{
      //   if(res.data.code==200){
      //     this.sendModel = res.data.list
      //   }
      // })
    },
    // 查询所有商品分类
    getCategoryList (id) {
      serviceApione.getCategory().then(res => {
        if (res.data.code == 200) {
          this.productClassifyTableData = res.data.list
          res.data.list.forEach(k => {
            if (k.id == id) {
              this.productClassifyMultipleSelection = [k]
            } else {
              k.children.forEach(j => {
                if (j.id == id) {
                  this.productClassifyMultipleSelection = [j]
                }
              })
            }
          })
        }
      })
    },
    close () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss">
img {
  margin-right: 10px;
}

.paImg {
  width: 148px;
  height: 148px;
}
</style>
